<template>
	<div class="side-left-right">
		<div class="item-plane">
			<div class="item_2">
				<div class="box-parent">
					<div class="head">
						<span class="title">院内老年人类型分布</span>
					</div>
					<div class="box">
						<div class="box1">
							<div class="box1-1"></div>
							<div class="box1-2">
								<span class="value">10
									<span class="unit">人</span>
								</span>
								<span class="title">自理</span>
							</div>
						</div>
						<div class="box1">
							<div class="box1-1-2"></div>
							<div class="box1-2">
								<span class="value">10
									<span class="unit">人</span>
								</span>
								<span class="title">半护理</span>
							</div>
						</div>
						<div class="box1">
							<div class="box1-1-3"></div>
							<div class="box1-2">
								<span class="value">10
									<span class="unit">人</span>
								</span>
								<span class="title">全护理</span>
							</div>
						</div>
						<div class="box1">
							<div class="box1-1-4"></div>
							<div class="box1-2">
								<span class="value">10
									<span class="unit">人</span>
								</span>
								<span class="title">认知障碍</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="item_3">
				<div class="box-parent">
					<div class="head">
						<span class="title">楼宇设备概况</span>
					</div>
					<div class="box">
						<div class="box1">
							<div class="logo1"></div>
							<span class="title">在线率</span>
							<span class="value">80.1%</span>
						</div>
						<div class="box2">
							<div class="logo1"> </div>
							<span>离线</span>
							<div class="logo2"> </div>
							<span>在线</span>
						</div>
					</div>
					<div class="chart" ref="chart2Container">
						<v-chart ref="chart2" :dSource="datState2" :w="'100%'" :h="'100%'"></v-chart>
						<!-- <Bar3D unit="元" :xAxis="xAxisData" :series="seriesData" :pictorialBarColor="pictorialBarColor"/> -->
					</div>
				</div>
			</div>
			<div class="item_4">
				<div class="box-parent">
					<div class="head">
						<span class="title">实时访客</span>
					</div>
					<div class="box">
						<div class="box1">
							<div ref="pieChart" class="chart"></div>
							<div class="logo2"></div>
							<span class="title">已处理进度</span>
						</div>
						<div class="box2">
							<div class="logo1"><span class="title">本年度报警</span>
								<span class="value">123</span>
								<span class="unit">次</span>
							</div>
							<div class="box3">
								<div class="logo1">
								</div>
								<span class="value">387<span class="unit">次</span></span>

								<span class="title">已处理告警</span>
							</div>
							<div class="box4">
								<div class="logo2">
								</div>
								<span class="value2">187<span class="unit">次</span></span>
								<span class="title">未处理告警</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import {
	onMounted,
	reactive,
	nextTick,
	ref,
	watch
} from "vue";
const ref1 = ref(null)
import Bar3D from "@/components/chart/bar-3d.vue";
import callMockApi from '@/api/mockapi.js';
import vChart from "mChart/chart.vue";
const callApiInstance = callMockApi();
import * as echarts from 'echarts';
const chart2Container = ref(null);
const chart2 = ref(null);
const datState2 = reactive(createCylindricalBar(15, 15, '#32CCFF', ['XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料'], [], [38, 60, 59, 26, 50, 20],[23, 74, 95, 36, 40, 70]));
function createCylindricalBar(size, thickness, color, xAxisData, yAxisData, seriesData,seriesData2) {
	   // 计算偏移量 - 确保两个柱子有足够的间距
	   const offset = thickness * 0.5; // 柱子宽度60%的偏移量
	return {
		title: {
			text: '个',
			left: 16,
			textStyle: {
				color: "#575555",
				fontStyle: 'normal',
				fontWeight: 'bolder',
				fontSize: 12,
			}
		},
		grid: {
			left: '5%',
			right: '5%',
			// top: '5%',
			top: '15%',
			bottom: '5%',
			containLabel: true
		},
		tooltip: {
			trigger: 'item',
			formatter: function (parms) {
				return parms.marker + " " + parms.name + "：" + parms.value + "次";
			}
		},
		xAxis: {
			type: 'category',
			data: xAxisData,
			axisTick: { show: false },
			axisLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } },
			axisLabel: {
				color: '#2A2E3E', // 文字颜色
				fontSize: 12, // 字体大小
				fontFamily: 'Adobe Heiti Std', // 字体
				fontWeight: 'normal', // 字体粗细
				fontStyle: 'italic', // 斜体字
				// lineHeight: 80, // 行高
				margin: 20, // 距离坐标轴的间距
				interval: 0 // 确保显示所有标签
			}
		},
		yAxis: {
			type: 'value',
			axisTick: { show: false },
			axisLine: { show: false },
			axisLabel: { color: '#2A2E3E', fontSize: 12 },
			splitLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } }
		},
		
		series: [
            // ===== 第一个系列 =====
            // 顶部圆形 - 系列1
            {
                name: '在线',
                type: "pictorialBar",
                symbolSize: [thickness, 12],
                symbolOffset: [-offset, -8], // 向左偏移
                z: 12,
                symbolPosition: "end",
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#F87352" },
                        { offset: 1, color: "#FF9B79" }
                    ], false)
                },
                data: seriesData
            },
            // 中间柱子 - 系列1
            {
                name: '在线',
                type: 'bar',
                barWidth: thickness,
                barGap: '0%',
                itemStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: "linear",
                        global: false,
                        colorStops: [
                            { offset: 0, color: "#F87352" },
                            { offset: 1, color: "#FF9B79" }
                        ]
                    }
                },
                data: seriesData
            },
            // 底部圆形 - 系列1
            {
                name: '在线',
                type: "pictorialBar",
                symbolSize: [thickness, 12],
                symbolOffset: [-offset, 8], // 向左偏移
                z: 12,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: "#F87352" },
					{ offset: 1, color: "#FF9B79" }
                    ])
                },
                data: seriesData
            },
            
            // ===== 第二个系列 =====
            // 顶部圆形 - 系列2
            {
                name: '离线',
                type: "pictorialBar",
                symbolSize: [thickness, 12],
                symbolOffset: [offset, -8], // 向右偏移
                z: 12,
                symbolPosition: "end",
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#46A9FF" },
                        { offset: 1, color: "#68B1FF" }
                    ], false)
                },
                data: seriesData2
            },
            // 中间柱子 - 系列2
            {
                name: '离线',
                type: 'bar',
                barWidth: thickness,
                barGap: '0%',
                itemStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: "linear",
                        global: false,
                        colorStops: [
                            { offset: 0, color: "#46A9FF" },
                            { offset: 1, color: "#68B1FF" }
                        ]
                    }
                },
                data: seriesData2
            },
            // 底部圆形 - 系列2
            {
                name: '离线',
                type: "pictorialBar",
                symbolSize: [thickness, 12],
                symbolOffset: [offset, 8], // 向右偏移
                z: 12,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#46A9FF" },
                        { offset: 1, color: "#68B1FF" }
                    ])
                },
                data: seriesData2
            }
        ]


	};
}
// 饼图容器的引用
const pieChart = ref(null);
onMounted(() => {
	const chart = echarts.init(pieChart.value);
	const option = {
		series: [{
			name: '告警统计',
			type: 'pie',
			radius: ['60%', '40%'], // 设置饼图大小
			center: ['50%', '40%'],
			labelLine: {  //删除指示线
				show: false
			},
			data: [{
				value: 75,
				itemStyle: {
					color: '#35E384'
				}
			},
			{
				value: 25,
				itemStyle: {
					color: 'rgba(0, 0, 0, 0)'
				}
			}
			]
		}],
		graphic: [{
			type: 'group',
			left: 'center',
			top: '40px',
			children: [
				{
					type: 'text',
					left: 'center',
					top: 0,
					style: {
						text: 80 + "%",
						fontFamily: 'Adobe Heiti Std',
						fontWeight: 'normal',
						fontSize: 15,
						fill: '#35E384',
						lineHeight: 41,
						fontStyle: 'italic',
						width: 34,
						height: 20,
						background: 'linear-gradient(0deg, #FF9C9C 0%, #FF1515 100%)',
						// 让背景应用到文字上
						backgroundClip: 'text',
						textFill: 'transparent',
						align: 'center',
					}
				}
			]
		}]
	};
	chart.setOption(option);
});
watch(() => {
	if (chart2.value && typeof chart2.value.setDat === 'function') {
		chart2.value.setDat(datState2);
	}
})
//加载
onMounted(async () => {
	setTimeout(function () {

	}, 8000)
});

const size_ts = [35, 45],
	txt_color = "#eee",
	label_stl = {
		alignTo: 'edge',
		formatter: '{b|{d}}{time|%}',
		minMargin: 5,
		edgeDistance: 10,
		lineHeight: 20,
		rich: {
			time: {
				fontSize: 10,
				color: '#eee'
			},
			b: {
				fontSize: 32
			}
		}
	},
	disable = {
		name: '',
		label: {
			show: false,
		},
		select: {
			disabled: true
		},
		emphasis: {
			disabled: true
		},
		cursor: 'unset',
		itemStyle: {
			color: "#41b7ff31"
		}
	},
	mp = {
		// data: [{
		// 	type: 'max',
		// 	name: 'Max'
		// }],
		label: {
			show: true,
			offset: [0, -2]
			// formatter: '{b}: {@score}'
		},
	},
	dataJC = reactive({
		title: {
			text: 'kwh',
			left: 18,
			textStyle: {
				color: txt_color,
				fontStyle: 'normal',
				fontWeight: 'bolder',
				fontSize: 14,
			}
		},
		textStyle: {
			color: txt_color,
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: ['a'],
			textStyle: {
				color: txt_color,
			},
			right: 50,
			inactiveColor: '#797979',
		},
		grid: {
			top: '40',
			left: '3%',
			right: '40',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['1月', '2月', '3月', '4月', '5月'],
			axisLabel: {
				verticalAlign: 'top',
				align: "center",
				lineHeight: 30,
				interval: 0,
				rotate: 0
			},
		},
		yAxis: {
			type: 'value',
			splitLine: {
				show: false
			},
			axisLine: {
				show: true
			},
		},
		series: [{
			// name: 'a',
			type: 'line',
			areaStyle: {
				//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
				//相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
					[{
						offset: 0,
						color: '#4BFF93', // 0% 处的颜色
					},
					{
						offset: 1,
						color: 'rgba(75,255,147,0)', // 100% 处的颜色
					},
					],
					false), //globalCoord为false，表示使用自身坐标系进行渐变。 
			},
			type: 'line',
			smooth: true,
			lineStyle: {
				color: '#33B065',
				width: 1
			},
			showSymbol: true,
			emphasis: {
				focus: 'series'
			},
			data: [300, 401, 264, 156, 250],
			markPoint: {
				itemStyle: {
					color: '#33B065'
				},
				...mp
			},
			z: 0,
		}]
	});
const props = defineProps({
	data: {
		type: Object,
		default: {
			nh: null,
			fx: null,
		}
	},
});
watch(() => {
})
</script>

<style scoped lang="scss">
.side-left-right {
	padding: 0px 0px 0px 0px !important;

}

.item-plane {
	display: flex;
	padding: 0px 0px 0px 0px !important;
	height: calc(100% - 40px) !important;
	margin-bottom: 40px;
}


.item_2 {
	height: 27%;

	.box-parent {
		padding: 0 25px 0 25px;
		margin-top: 40px;
		// display: flex;
		flex-direction: row;
		height: 250px;
		background-image: url('/imgs/nindex/矩形 1.png');
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.head {
			display: flex;
			height: 45px;
			position: relative;
			top: -26px;
			background-image: url("/imgs/nindex/图层 620.png");
			background-position: left;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				margin-top: 5px;
				margin-left: 80px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 27px;
				color: #FFFFFF;

			}
		}

		.box {
			top: -10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: 15px;
			position: relative;

			.box1 {
				width: 222px;
				height: 90px;
				display: flex;
				background-image: url("/imgs/nindex/组 1730.png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// justify-content: space-between;
				align-items: center;

				.box1-1 {
					margin-left: 10px;
					margin-top: 15px;
					width: 58px;
					height: 70px;
					background-image: url("/imgs/nindex/组 1649(3).png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.box1-1-2 {
					margin-left: 10px;
					margin-top: 15px;
					width: 58px;
					height: 70px;
					background-image: url("/imgs/nindex/组 1649(1).png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.box1-1-3 {
					margin-left: 10px;
					margin-top: 15px;
					width: 58px;
					height: 70px;
					background-image: url("/imgs/nindex/组 1649(2).png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.box1-1-4 {
					margin-left: 10px;
					margin-top: 15px;
					width: 58px;
					height: 70px;
					background-image: url("/imgs/nindex/组 1649.png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.box1-2 {
					margin-left: 30px;
					display: flex;
					flex-direction: column;
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.title {
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 15px;
						color: #2A2E3E;
						line-height: 23px;
						opacity: 0.8;
					}

					.value {
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #FFA200;
						line-height: 14px;

						.unit {
							width: 12px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							line-height: 23px;
							opacity: 0.5;
						}
					}
				}
			}

			.box2 {
				width: 480px;
				margin-top: 25px;
				height: 190px;
				display: flex;
				background-image: url("/imgs/nindex/组 1728.png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				align-items: center;

				.title {
					top: 105px;
					left: 51px;
					position: absolute;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 17px;
					color: #FFFFFF;
					opacity: 0.8;
				}

				.box2-2 {
					margin-top: 25px;
					display: flex;
					width: 100px;
					height: 100px;
					flex-wrap: wrap;
					flex-direction: column;

					.box2-2-1 {
						width: 500px;
						margin-top: 10px;
						background-image: url("/imgs/nindex/组 1722.png");
						background-position: left;
						background-repeat: no-repeat;

						.title2 {
							margin-left: 40px;
							// width: 29px;
							// height: 14px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 15px;
							color: #2A2E3E;
							line-height: 20px;
						}

						.title3 {
							margin-left: 10px;
							// width: 22px;
							// height: 21px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #58AFF6;
							line-height: 20px;
						}

						.title4 {
							margin-left: 10px;
							// width: 36px;
							// height: 21px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #58AFF6;
							line-height: 20px;
						}
					}

					.box2-2-2 {
						width: 500px;
						margin-top: 10px;
						background-image: url("/imgs/nindex/组 1722 拷贝.png");
						background-position: left;
						background-repeat: no-repeat;

						.title2 {
							margin-left: 40px;
							width: 29px;
							height: 14px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 15px;
							color: #2A2E3E;
							line-height: 20px;
						}

						.title3 {
							margin-left: 10px;
							width: 22px;
							height: 21px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #FF8961;
							line-height: 20px;
						}

						.title4 {
							margin-left: 10px;
							width: 36px;
							height: 21px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #FF8961;
							line-height: 20px;
						}
					}

				}
			}
		}
	}
}

.item_3 {
	height: 37.5%;

	.box-parent {
		padding: 0 25px 0 25px;
		margin-top: 43px;
		// display: flex;
		flex-direction: row;
		align-items: center;
		overflow: visible;
		height: 320px;
		background-image: url('/imgs/nindex/kuang.png');
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.head {
			display: flex;
			height: 45px;
			position: relative;
			top: -26px;
			background-image: url(/imgs/nindex/title.png);
			background-position: left;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				margin-top: 5px;
				margin-left: 70px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 27px;
				color: #FFFFFF;
			}
		}

		.chart {
			width: 100%;
			height: 200px;
		}

		.box {
			top: -15px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			position: relative;

			.box1 {
				display: flex;
				width: 150px;
				align-items: center;
				height: 40px;
				background-image: url("/imgs/nindex/矩形 686.png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.logo1 {
					margin-left: 5px;
					width: 25px;
					height: 25px;
					background-image: url("/imgs/nindex/在线 (4).png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.title {
					margin-left: 10px;
					height: 15px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 15px;
					color: #2A2E3E;
					line-height: 15px;
				}

				.value {
					margin-left: 10px;
					font-family: DIN1451EF EngNeu;
					font-weight: 400;
					font-size: 15px;
					color: #218CFF;
					line-height: 10px;
				}
			}

			.box2 {
				display: flex;
				align-items: center;
				height: 40px;

				.logo1 {
					width: 20px;
					height: 20px;
					background-image: url("/imgs/nindex/矩形 735.png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.logo2 {
					margin-left: 10px;
					width: 20px;
					height: 20px;
					background-image: url("/imgs/nindex/矩形 735(1).png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				span {
					margin-left: 20px;
					height: 14px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 15px;
					color: #2A2E3E;
					line-height: 15px;
				}
			}
		}
	}
}

.item_4 {
	height: 30%;

	.box-parent {
		padding: 0 25px 0 25px;
		// display: flex;
		margin-top: 10px;
		flex-direction: row;
		align-items: center;
		overflow: visible;
		height: 300px;
		background-image: url('/imgs/nindex/矩形 1.png');
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.head {
			display: flex;
			height: 45px;
			position: relative;
			top: -26px;
			background-image: url(/imgs/nindex/title.png);
			background-position: left;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				margin-top: 5px;
				margin-left: 70px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 27px;
				color: #FFFFFF;
			}
		}

		.box {
			top: -15px;
			display: flex;
			// flex-wrap: wrap;
			gap: 10px;
			justify-content: center;
			position: relative;

			.box1 {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 200px;
				height: 249px;
				background-image: url("/imgs/nindex/矩形 592.png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.chart {
					width: 80%;
					height: 60%;
				}

				.title {
					height: 16px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 17px;
					color: #2A2E3E;
					line-height: 28px;
				}

				.logo2 {
					width: 40px;
					height: 40px;
					background-image: url("/imgs/nindex/已处理 (1).png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;

				}
			}

			.box2 {
				// margin-left: 10px;
				// display: block;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				.logo1 {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 250px;
					height: 62px;
					background-image: url("/imgs/nindex/矩形 592 拷贝.png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.title {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 17px;
					color: #2A2E3E;
					line-height: 28px;
				}

				.value {
					margin-left: 20px;
					font-family: DIN1451EF EngNeu;
					font-weight: 400;
					font-size: 37px;
					color: #FF6060;
					line-height: 25px;
				}

				.unit {
					margin-left: 5px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 13px;
					color: #2A2E3E;
					line-height: 23px;
					opacity: 0.5;
				}


				.box3 {
					// margin-left: 10px;
					margin-top: 5px;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					float: left;
					width: 120px;
					gap: 25px;
					height: 181px;
					background-image: url("/imgs/nindex/矩形 592 拷贝 2.png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.logo1 {
						display: flex;
						justify-content: center;
						// align-items: center;
						width: 35px;
						height: 35px;
						background-image: url("/imgs/nindex/告警 (7).png");
						background-position: left;
						background-size: 100% 100%;
						background-repeat: no-repeat;

					}

					.logo2 {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 35px;
						height: 35px;
						background-image: url("/imgs/nindex/告警 (7) 拷贝.png");
						background-position: left;
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}

					.title {
						height: 15px;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 15px;
						color: #2A2E3E;
						line-height: 28px;
					}

					.value {
						height: 25px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #1FBA38;
						line-height: 25px;
					}

					.value2 {
						height: 25px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #FF6060;
						line-height: 25px;
					}

					.unit {
						height: 12px;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 13px;
						color: #2A2E3E;
						line-height: 23px;
						opacity: 0.5;
					}
				}

				.box4 {
					margin-left: 10px;
					margin-top: 5px;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					float: left;
					width: 120px;
					gap: 25px;
					height: 181px;
					background-image: url("/imgs/nindex/矩形 592 拷贝 2.png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.logo1 {
						display: flex;
						justify-content: center;
						// align-items: center;
						width: 35px;
						height: 35px;
						background-image: url("/imgs/nindex/告警 (7).png");
						background-position: left;
						background-size: 100% 100%;
						background-repeat: no-repeat;

					}

					.logo2 {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 35px;
						height: 35px;
						background-image: url("/imgs/nindex/告警 (7) 拷贝.png");
						background-position: left;
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}

					.title {
						height: 15px;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 15px;
						color: #2A2E3E;
						line-height: 28px;
					}

					.value {
						height: 25px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #1FBA38;
						line-height: 25px;
					}

					.value2 {
						height: 25px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #FF6060;
						line-height: 25px;
					}

					.unit {
						height: 12px;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 13px;
						color: #2A2E3E;
						line-height: 23px;
						opacity: 0.5;
					}
				}

			}
		}
	}
}
</style>